<template>
  <div class="admin-page-content">
    <div class="menu-content">
      <div class="item">
        <div class="title">服务菜单</div>
        <div class="item-box-content">
          <el-table :data="TreeMenu" row-key="id" border default-expand-all @row-click="rowClick"
            :tree-props="{children:'childs', hasChildren:'hasChildren'}" size="mini" v-loading="loading">
            <el-table-column prop="name">
              <!-- <div slot="header">
                <el-tooltip class="items" effect="dark" content="新增顶级菜单" placement="top">
                  <i class="icon-table add-icon" @click="addParasMenus()"></i>
                </el-tooltip>
              </div> -->
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-tooltip class="items" effect="dark" content="编辑" placement="top">
                  <i class="icon-table edit-icon" @click="editMenu(scope.row)"></i>
                </el-tooltip>
                <el-tooltip class="items" effect="dark" content="新增子菜单" placement="top" v-if="scope.row.leaf === 0">
                  <i class="icon-table add-icon" @click="addMenusNext(scope.row)"></i>
                </el-tooltip>
                <el-tooltip class="items" effect="dark" content="删除" placement="top">
                  <i class="icon-table delete-icon" @click="deleteMenu(scope.row)"></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
       <div class="item">
        <div class="title">可选服务</div>
        <div class="search-box">
          <el-input v-model="search.name" style="width:50%;" size="small"></el-input>
          <el-button type="primary" icon="el-icon-search" size="small" style="margin-left:30px;" @click="getServiceInfo">查询</el-button>
        </div>
        <div class="item-box-content-has" v-if="!selectMenu.disable">
          <div class="check-box">
            <el-checkbox-group @change="changeSerivce" v-model="checkList">
              <template v-for="(item, key) in serviceList">
                <el-checkbox class="checkout-item" :key="key" :label="item.id">{{item.name}}</el-checkbox>
              </template>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="新增菜单" :close-on-press-escape="false" width="30%"
      :close-on-click-modal="false" :visible.sync="dialogVisible">
       <el-form :model="addMenus" :rules="addMenusRules" ref="ruleForm"  label-width="100px" class="demo-ruleForm">
         <el-form-item label="菜单名称" prop="name">
           <el-input placeholder="请输入菜单名称" v-model="addMenus.name"></el-input>
         </el-form-item>
         <el-form-item label="底层菜单" prop="leaf">
           <el-select style="width:100%" v-model="addMenus.leaf">
             <el-option label="否" :value="0"></el-option>
             <el-option label="是" :value="1"></el-option>
           </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
        <el-button type="info" @click.native="cancelSubmit">取消</el-button>
        <el-button type="primary" @click.native="submitFrom('ruleForm')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAppinfoList, getPubilcMenuTree, getTreeMenuApps, updateTreeApps,
  updateMenusInfo, deleteMenusInfo, addMenusInfo} from '@/api/admin/menu'
export default {
  data() {
    return {
      TreeMenu: [],
      serviceList:[],
      checkList: [],
      search: {
        name: '',
        pageNumber: 1,
        pageSize: 100000,
      },
      selectMenu: {
        disable: true,
        id: ''
      },
      loading: true,
      addMenus: {
        name: '',
        leaf: 0,
        parentId: ''
      },
      addMenusRules: {
        name: [ { required: true, message: '请输入菜单名称', trigger: 'blur' } ],
        leaf: [ { required: true, message: '请选择菜单类型', trigger: 'change' } ]
      },
      dialogVisible: false,
    }
  },
  mounted() {
    this.getTreeMenus()
    this.getServiceInfo()
  },
  methods: {
    // 新增顶级菜单
    addParasMenus() {
      const vm = this;
      this.$prompt(`菜单名称`,`新增顶级菜单`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        inputValidator: function(val) {
          if (!val || val === '') {
            return '请输入菜单名称';
          }
          return true
        }
      }).then(({ value }) => {
        addMenusInfo({leaf: 0,parentId:'-1',name:value}).then((response) => {
          if(response.code === '20000') {
            vm.$message.success('新增菜单成功')
            vm.getTreeMenus()
          }
        })
      })
      .catch(() => {
        vm.$message.info('取消新增')
      })
    },
    // 点击新增
    submitFrom(fromRule) {
      const vm = this;
      vm.$refs[fromRule].validate((valide) => {
        if (valide) {
          addMenusInfo(vm.addMenus).then((res)=>{
            if (res.code === '20000') {
              vm.$message.success('新增子菜单成功');
              vm.getTreeMenus()
              vm.addMenus = vm.$options.data().addMenus;
              vm.dialogVisible = false;
            }
          })
        }
      })
    },
    // 取消新增
    cancelSubmit() {
      this.addMenus = this.$options.data().addMenus
      this.dialogVisible = false
    },
    // 新智子菜单
    addMenusNext(row) {
      this.addMenus.parentId = row.id
      this.dialogVisible = true
    },
    // 删除
    deleteMenu(row) {
      const vm = this;
      vm.$confirm('此操作将删除该菜单及子菜单，请谨慎操作，是否继续?','删除菜单', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      })
      .then(() => {
        deleteMenusInfo({id:row.id}).then((response) => {
          if(response.code === '20000') {
            vm.$message.success('删除成功');
            vm.getTreeMenus()
          }
        })
      })
      .catch(() => {
        vm.$message.info('取消删除')
      })
    },
    // 编辑
    editMenu(row) {
      const vm  = this;
      this.$prompt(`菜单名称`,`编辑菜单`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        inputValue: row.name,
        inputValidator: function(val) {
          if (!val || val === '') {
            return '请输入菜单名称';
          }
          return true
        }
      }).then(({ value }) => {
        updateMenusInfo({id:row.id,name:value}).then((response) => {
          if(response.code === '20000') {
            vm.$message.success('修改菜单成功')
            vm.getTreeMenus()
          }
        })
      })
      .catch(() => {
        vm.$message.info('取消修改')
      })
    },
    // 更改
    async changeSerivce(val) {
      const vm = this;
      let query = {
        id:vm.selectMenu.id
      }
      let temp = val.map(function(item){
        return {appId:item}
      })
      query.apps = temp
      await updateTreeApps(query)
    },
    // 点击
    async rowClick(row) {
      const vm = this
      if (row.leaf === 1) {
        let responese = await getTreeMenuApps({id:row.id})
        if(responese.code === '20000') {
          vm.checkList = responese.data.apps.map(function(item){
            return item.appId
          })
        }
        this.selectMenu = {
          disable: false,
          id: row.id
        }
      }else {
        this.selectMenu = this.$options.data().selectMenu
        this.checkList = []
      }
    },
    async getTreeMenus() {
      const vm = this;
      vm.loading = true
      let responese = await getPubilcMenuTree()
      vm.loading = false
      if (responese.code === '20000') {
        vm.TreeMenu = responese.data;
      }
    },
    async getServiceInfo() {
      const vm = this;
      let responese = await getAppinfoList(vm.search);
      if (responese.code === '20000') {
        let temp  = responese.data.list;
        vm.serviceList = temp
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.menu-content {
  width: 100%;
  overflow: hidden;
  .item {
    width: 33.33%;
    float: left;
    margin-right: 30px;
    .title {
      font-size: 16px;
      color: #666;
      padding-bottom: 10px;
    }
    .item-box-content {
      width: 100%;
      border: 1px solid #e4e7ed;
      min-height: 600px;
      _height: 600px;
    }
    .item-box-content-has {
      width: 100%;
      margin-top: 30px;
      border: 1px solid #e4e7ed;
      min-height: 540px;
      _height: 540px;
      height:auto !important;
      height: 540px;
      .check-box {
        padding: 20px;
        overflow: hidden;
        .checkout-item {
          width: 100%;
          overflow: hidden;
          padding: 5px 0;
        }
      }
    }
  }
}
.icon-table {
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    margin: 0 5px;
    border-radius: 50%;
    font-size: 20px;
    color: #1592e4;
}
</style>